<template>
    <div class="gameBox">
        <my-loding v-show="lodingStatus" :schedule="lodingNumber"></my-loding>
        <div v-show="!lodingStatus">
            <div class="game_prompt"><!-- 头部 -->
                <div class="game_promptLeft" @click="historyList">
                    <h6>报喜</h6>
                    <div class="game_lottery">{{`${lottery.name.constellation}·${lottery.name.elements}·${lottery.name.gender}`}}</div>
                </div>
                <div class="game_promptFortuna"></div>
                <div class="game_promptRight">
                    <h6>吉时</h6>
                    <div class="game_count">
                        <div v-show="count > 0 && lottery.show == false &&  lottery.end.status == false"><em>{{count}}</em>s</div>
                        <strong v-show="count==0 || lottery.show == true || lottery.end.status == true">开奖中</strong>
                    </div>
                </div>
            </div>

            <div class="game_main" ref="gameApp"><!-- 抽奖区域 -->
                <div class="game_outer" ref="game_outer" @click="constellation">
                    <div class="game_outerTimes">x<em>{{gameInfo.double[0]}}</em></div>
                    <span v-for="todo in outerAmount" :key="todo.id" :class="`me_coin game_totalChild${todo.id}`">{{todo.coin}}</span>
                    <span v-for="todo in total.outerAmount" :key="'total' + todo.id" :class="`game_outerChild${todo.id}`">{{todo.coin}}</span>
                </div>
                <div class="game_among" @click="elements">
                    <div class="game_amongTimes">x<em>{{gameInfo.double[1]}}</em></div>
                    <span v-for="todo in amongAmount" :key="todo.id" :class="`me_coin  game_amongTotalChild${todo.id}`">{{todo.coin}}</span>
                    <span v-for="todo in total.amongAmount" :key="'total' + todo.id" :class="`game_amongChild${todo.id}`">{{todo.coin}}</span>
                </div>
                <div class="game_inside" @click="gender">
                    <div class="game_insideTimes">x<em>{{gameInfo.double[2]}}</em></div>
                    <span v-for="todo in insideAmount" :key="todo.id" :class="`me_coin game_insideTotalChild${todo.id}`">{{todo.coin}}</span>
                    <span v-for="todo in total.insideAmount" :key="'total' + todo.id" :class="`game_insideChild${todo.id}`">{{todo.coin}}</span>
                </div>
            </div>

            <div class="game_bottom"><!-- 底部 -->
                <div class="game_bottomLeft">
                    <h6>我的金豆</h6>
                    <div class="game_price">
                        <span class="game_priceLast">{{coin}}</span>
                        <em class="game_priceAdd" @click="recharge"></em> 
                    </div>
                </div>
                <ul class="game_bottomGrade">
                    <li v-for="todo in grade.all" :key="todo" @click="editGrade(todo)" :class="todo == grade.self?'active':''"><span>{{todo}}</span></li>
                </ul>
                <div class="game_bottomClear" @click="clear"></div>
            </div>


            <div class="game_end" v-show="lottery.show"><!-- 开奖区域 -->
                <div class="game_endGender"><i :style="`background-position:${lottery.position.gender} 0;`"></i></div>
                <div class="game_endElements"><i :style="`background-position:${lottery.position.elements} 0;`"></i></div>
                <div class="game_endConstellation"><i :style="`background-position:${lottery.position.constellation} 0;`"></i></div>
            </div>

            <div class="game_remind" v-show="remind.start"><!-- 财源滚滚 -->
                <div class="game_remindText"><img src="../public/images/txt-cai.png" alt=""></div>
                <div class="game_remindSymbol"></div>
                <div class="game_remindText"><img src="../public/images/txt-yuan.png" alt=""></div>
                <div class="game_remindSymbol"></div>
                <div class="game_remindText"><img src="../public/images/txt-gun.png" alt=""></div>
                <div class="game_remindSymbol"></div>
                <div class="game_remindText"><img src="../public/images/txt-gun.png" alt=""></div>
            </div>

            <div class="game_remind" v-show="remind.end"><!-- 吉时已到 -->
                <div class="game_remindText"><img src="../public/images/txt-ji.png" alt=""></div>
                <div class="game_remindSymbol"></div>
                <div class="game_remindText"><img src="../public/images/txt-shi.png" alt=""></div>
                <div class="game_remindSymbol"></div>
                <div class="game_remindText"><img src="../public/images/txt-yi.png" alt=""></div>
                <div class="game_remindSymbol"></div>
                <div class="game_remindText"><img src="../public/images/txt-dao.png" alt=""></div>
            </div>

            <div class="game_result" v-show="lottery.end.status">
                <div v-show="lottery.end.coin == 0" class="game_resultSuccess">再接再厉</div>
                <div v-show="lottery.end.coin != 0" class="game_resultFailure">获得：{{lottery.end.coin}}豆</div>
            </div>
            <div class="game_order" @click="orderList">投注记录</div>

            <div class="otherCoinBox">
                <div class="otherCoin" v-for="(todo, i) in otherInfo" v-if="todo.show" :key="i" :style="todo.x != 0 && todo.y !=0 ?`left:${todo.x+'px'};top:${todo.y+'px'};`:''"></div>
            </div>

            <my-history v-show="historyInfo.status" :obj="historyInfo" :list="historyInfo.data"></my-history>
            <my-order v-show="orderInfo.status" :obj="orderInfo" :status="orderInfo.status" :data="orderInfo.list"></my-order>

            <div class="game_message" v-show="message.status">{{message.text}}</div>

            <div :class="`game_musicControl ${musicOff?'active':''}`" @click="musicControl"></div>

            <my-message :list="winning.message" :winning="winning"></my-message>

            <div class="betting_mask" v-show="mask.status" :style="`left:${mask.left}px;top:${mask.top}px;`"><!-- 遮罩 -->
                <div class="spinner">
                    <div class="spinner-container container1">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                    <div class="spinner-container container2">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                    <div class="spinner-container container3">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                </div>
            </div>

            <div class="imgUpdata_loader" v-show="netStatus">
                <div class="spinner">
                    <div class="spinner-container container1">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                    <div class="spinner-container container2">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                    <div class="spinner-container container3">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                </div>
            </div>

            <div class="disconnect" v-show="disconnectStatus">
                <h6>网络断开</h6>
                <p>网络异常，请检查</p>
                <a href="javascript:window.top.location.href = 'http://0.main.zodiac.xiaomaichang.net';">确认</a>
            </div>
        </div>
    </div>
</template>

<script>
import Hilo from "./../public/js/hilo-standalone.js"
import Game from "./../game/game.ts"
import Images from "./../game/images.js"
import Body from "./../game/main.ts"
import axios from "axios"
import HistoryVue from "./history.vue"
import Order from "./order.vue"
import Loding from "./loding.vue"
import Message from "./message.vue"

import Music from "./../public/js/music.js"
import config from "./../public/js/config.js"
import 'signalr'


export default {
    data(){
        return {
            otherInfo:[
            ],
            coin: 414,
            count: 15,
            otherStatus: false,
            bettingStatus: true,
            musicOff: false,
            rechargeStatus: false,
            maskStatus: false,
            netStatus: false,
            disconnectStatus: false,
            meCoinQueue:[],
            mask:{// 下注提醒
                status: false,
                left: 0,
                top: 0
            },
            message:{
                text: "",
                status: false
            },
            gameInfo:{// 游戏数据
                id: 1,
                nextId: 1,
                double:[0.1, 5, 3],
                nextDouble: [0, 0, 0]
            },
            grade:{// 下注档次
                self: 100,
                all: [100, 1000, 10000]
            },
            remind:{// 提示显示
                start: true,
                end: false
            },
            outerAmount: [// 星座下注
            ],
            amongAmount:[// 五行下注
            ],
            insideAmount:[// 性别下注
            ],
            total:{// 总下注
                outerAmount: [],
                amongAmount: [],
                insideAmount: []
            },
            lottery:{// 结果
                show: false,
                end:{
                    coin: 0,
                    status: false
                },
                name:{// 名称
                    constellation: "天蝎",
                    elements: "木",
                    gender: "金童",
                },
                position:{// 位置
                    constellation: "0",
                    elements: "0",
                    gender: "0"
                },
                winningId: [1, 1, 1]
            },
            flyCoin:[
            ],
            historyInfo:{// 历史记录
                status: false,
                list: []
            },
            orderInfo:{// 订单
                status: false,
                page: 0,
                list: []    
            },
            winning:{
                message:[// 跑马灯数据
                    {
                        text: "<span>欢</span><i>迎来到十二星座</i>", 
                        left: 0
                    }
                ]
            },
            lodingNumber: 0,// 进度
            lodingStatus: true
        }
    },
    components:{
        "my-history": HistoryVue,
        "my-order": Order,
        "my-loding": Loding,
        "my-message": Message
    },
    methods:{
        constellation(e){// 12星座下注
            let style = document.defaultView.getComputedStyle(this.$refs.gameApp, null),
                x = e.pageX - this.game._width / 4,
                y = e.pageY - parseInt(style.top) - parseInt(style.height)/2,
                angle = Math.abs(Math.atan2(x, y) * 180 / Math.PI - 180) + 15;
            angle > 360 && (angle = angle - 360);
            let data = this.body.constellation(Math.floor(angle / 30) + 1);
            this.betting(this.outerAmount, {id:data.id}, 3, e);
        },
        elements(e){// 五行下注
            let style = document.defaultView.getComputedStyle(this.$refs.gameApp, null),
                x = e.pageX - this.game._width / 4,
                y = e.pageY - parseInt(style.top) - parseInt(style.height)/2,
                angle = Math.abs(Math.atan2(x, y) * 180 / Math.PI - 180) + 36;
            angle > 360 && (angle = angle - 360);
            let data = this.body.elements(Math.floor(angle / 72) + 1);
            this.betting(this.amongAmount, {id:data.id}, 2, e);
        },
        gender(e){// 性别下注
            let style = document.defaultView.getComputedStyle(this.$refs.gameApp, null),
                x = e.pageX - this.game._width / 4,
                y = e.pageY - parseInt(style.top) - parseInt(style.height)/2,
                angle = Math.abs(Math.atan2(x, y) * 180 / Math.PI - 180);
            angle > 360 && (angle = angle - 360);
            let data = this.body.gender(Math.abs(Math.floor(angle / 180) + 1));
            this.betting(this.insideAmount, {id:data.id}, 1, e);
        },
        betting(obj, data, type, event){// 下注函数
            if(!this.bettingStatus || this.count <= 4 || this.lottery.show || this.lottery.end.status ){
                return;
            }
            this.mask.left = event.x;
            this.mask.top = event.y;
            this.mask.status = this.otherStatus = true;

            /* axios({
                method:'post',
                url: this.$store.state.href + '/api/game/Wager',
                data:JSON.stringify({
                    GameId: this.gameInfo.id,
                    PartyId: type,
                    OptionNumber: type == 1? data.id == 1? 2 : 1 :data.id,
                    Coin: this.grade.self
                }),
                crossDomain: true,
                withCredentials: true,
                headers: {
                    'Content-Type': 'application/json',
                }
            }).then((res) => { */
                this.music.getAudio("coin").dom.play();
                this.mask.status = this.otherStatus = false;
                this.coin = 10000;
                data.coin = this.grade.self;
                let i = 0,
                    index = 0;

                this.mePushTotal(data, type);
                if(obj.length == 0){
                    obj.push(data);
                    return;
                }
                for(i;i<obj.length;i++){
                    if(obj[i].id == data.id){
                        obj[i].coin += data.coin;
                        index = i;
                        break;
                    }else if(i == obj.length - 1){
                        obj.push(data);
                        index = i + 1;
                        break;
                    }
                }
            /* }).catch((res)=>{
                this.mask.status = this.otherStatus = false;
                if (res.response.status == 500 && (res.response.data.message == "金豆不足" || res.response.data.message == "NotEnoughCoin") ) {
                    axios({
                        method:'post',
                        url: 'http://www.xiaomaichang.net/api/Coin/Give',
                        crossDomain: true,
                        withCredentials: true,
                        headers: {
                            'Content-Type': 'application/json',
                        }
                    }).then((res)=>{
                        console.log(res);
                        this.alert(`金豆不足，系统赠送您${res.data.GiveCoin}金豆`);
                        this.coin = res.data.UserCoin;
                    }).catch(()=>{
                        this.recharge();
                    })
                }else if(res.response.status == 401 || res.response.status == 403){
                    res.response && (window.top.location.href = window.top.location.href);
                }else{
                    res.response.data.message && this.alert(res.response.data.message);
                }
            }) */
        },
        mePushTotal(data, type){// 自己下注金额添加到总金额
            let obj = type == 3 ? this.total.outerAmount: type == 2 ? this.total.amongAmount : this.total.insideAmount,
                id = type == 1? data.id == 1? 2 : 1 :data.id,
                result = this.map(obj, "id", id);
            
            this.meCoinQueue.push(data.coin);// 将自己下注数据添加到数组，永远从数组取第一条数据
            this.otherCoin(type, id, null);
        },
        map(arr, id, value){// 比对数组
            var judgment = {
                status: false,
                key: null
            };
            for(let i = 0; i< arr.length; i++){
                if( arr[i][id] == value){
                    judgment.status = true;
                    judgment.key = i;
                    break;
                }
            }
            return judgment;
        },
        editGrade(coin){// 修改下注金额
            this.grade.self = coin;
        },
        clear(){// 清除下注
            this.otherStatus = true;
            /* axios({
                method:'post',
                url: this.$store.state.href + '/api/game/clear',
                data:JSON.stringify({
                    GameId: this.gameInfo.id
                }),
                crossDomain: true,
                withCredentials: true,
                headers: {
                    'Content-Type': 'application/json',
                }
            }).then((res) => { */
                this.otherStatus = false;
                this.coin = 200000;
                this.clearDeleteTotal(3);
                this.amongAmount.length = this.insideAmount.length = this.outerAmount.length = 0;
            /* }).catch((res)=>{
                this.otherStatus = false;
                res.response && this.alert(res.response.data.message);
            }) */

        },
        clearDeleteTotal(type){// 删除总
            if(type == 0){
                return;
            }
            let obj = type == 3 ? this.outerAmount: type == 2 ? this.amongAmount : this.insideAmount,
                aims = type == 3 ? this.total.outerAmount: type == 2 ? this.total.amongAmount : this.total.insideAmount;

            for(let i = 0; i< obj.length; i++){
                let id = type == 1? obj[i].id == 1? 2 : 1 :obj[i].id,
                    result = this.map(aims, "id", id);
                if(result.status){
                    aims[result.key].coin == obj[i].coin ? aims.splice(result.key, 1) : aims[result.key].coin -= obj[i].coin;
                }
            }
            this.clearDeleteTotal(type-1)
        },
        otherCoin(floor, id, coin){// 飞金豆
            let position,
                obj;
            switch (floor) {
                case 3:
                    position = this.body.angle(this, 30*(id-1), 38);
                    obj = this.total.outerAmount;
                    break;
                case 2:
                    position = this.body.angle(this, 72*(id-1), 90);
                    obj = this.total.amongAmount;
                    break;
                case 1:
                    position = this.body.angle(this, 180*(id-1) - 90, 140);
                    obj = this.total.insideAmount;
                    break;
            }
            let index = this.otherInfo.push({
                x: 0,
                y: 0,
                endx: position.x,
                endy: position.y,
                show: true
            }) - 1;
            
            setTimeout(()=>{
                this.otherInfo[index].x = this.otherInfo[index].endx;
                this.otherInfo[index].y = this.otherInfo[index].endy;
            },30)
            
            setTimeout(()=>{
                let result = this.map(obj, "id", id);
                if(result.status){
                    coin? 
                        obj[result.key].coin = coin: 
                        obj[result.key].coin+=this.meCoinQueue[0];
                }else{
                    obj.push({
                        coin: coin? coin: this.meCoinQueue[0],
                        id
                    })
                }
                !coin && this.meCoinQueue.splice(0, 1);
                this.otherInfo[index].show = false;
            }, 1200)
        },
        reset(){// 重置
            this.gameInfo.id = this.gameInfo.nextId;
            this.gameInfo.double = this.gameInfo.nextDouble;

            this.amongAmount.length = this.insideAmount.length = this.outerAmount.length = 
                this.total.outerAmount.length = this.total.amongAmount.length = this.total.insideAmount.length =
                this.lottery.position.constellation = this.lottery.position.elements = this.lottery.position.gender = 0;

            this.otherInfo.length = 0


            this.start();
            this.count = 20;
        },
        lotteryEvent(){// 开奖函数
            this.remind.end = false;
            this.lottery.show = true;
            /// this.music.getAudio("flop").dom.play();

            setTimeout(() => {
                let constellation = this.body.scrollBar(1, this.lottery.winningId[0]),
                    elements = this.body.scrollBar(2, this.lottery.winningId[1]),
                    gender = this.body.scrollBar(3, this.lottery.winningId[2]);
                
                this.lottery.position.constellation = constellation.position;
                this.lottery.position.elements = elements.position;
                this.lottery.position.gender = gender.position;

                setTimeout(() => {// 动画先走，文字延迟7s显示
                    this.lottery.name.gender = gender.name;
                    this.lottery.name.constellation = constellation.name;
                    this.lottery.name.elements = elements.name;
                }, 11000);

                setTimeout(() => {// 获取是否赢得金豆
                    /* axios({// 获取是否赢得金豆
                        method:'get',
                        url: this.$store.state.href + '/api/query/userwager?gameId=' + this.gameInfo.id,
                        data:{
                            param:''
                        },
                        withCredentials: true,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        }
                    }).then((res)=>{ */
                        this.lottery.end.status = true;
                        this.lottery.show = false;
                        if(true){// res.data.GameWager && res.data.GameWager.WinCoin != 0
                            this.lottery.end.coin = 1000
                            this.music.getAudio("coin").dom.play();
                        }else{
                            this.music.getAudio("lose").dom.play();
                        }
                        this.coin = 100000;

                        setTimeout(()=>{
                            this.lottery.end.status = false; 
                            this.lottery.end.coin = 0;
                            this.reset();
                        }, 3000)
                    /* }).catch(function(error){
                        error.response && (window.top.location.href =  window.top.location.href);
                    }) */
                }, 13000);
            }, 30);
        },
        start(){// 开始函数
            this.body.countDown.call(this, function(){
                // console.log(data)
                this.winningAdd(1000);
                //this.gameInfo.nextId = data.NextGame.GameId
                this.lottery.winningId = [1, 1, 1]
                this.gameInfo.nextDouble = [0, 0, 0]
                this.lotteryEvent();
                console.log("倒计时结束");
            })
        },
        totalSingle(i, num, arr, id, data){// 单数据处理
            // 键名 层数id 需要添加进的总数组 id 总数据
            let status = true,
                obj = num == 3 ? this.outerAmount: num == 2 ? this.amongAmount : this.insideAmount;
            for(let k = 0; k< arr.length; k++){
                if( arr[k].id == id ){
                    status = false;
                    if(data[i] == arr[k].coin){
                        break;
                        return status;
                    }
                    if(data[i] == 0){
                        arr.splice(k, 1);
                        break;
                        return status;
                    }
                    
                    arr[k].coin < data[i] ? 
                        this.otherCoin(num, id, data[i]) :
                        arr[k].coin = data[i];
                    break;
                    return status;
                }
                let result = this.map(obj, "id", id);
                if(result.status){
                    status = false;
                    obj[result.key].coin == data[i] || obj[result.key].coin + arr[k].coin == data[i]? true :this.otherCoin(num, id, data[i]);
                    break;
                    return status;
                }
            }
            let result = this.map(obj, "id", id);
            if(arr.length == 0 && result.status){
                status = false;
                obj[result.key].coin == data[i]? true :this.otherCoin(num, id, data[i], false);
                return status;
            }
            return status;
        },
        totalDealWith(data){// 总下注数据处理  等于0 数组遍历找不到，进入最下方
            if(this.count <= 4 || this.lottery.show == true || this.lottery.end.status == true){
                return;
            }
            for(let i in data.Wagers){
                let num = (i+"").length,
                    id = i< 100? i : (i+"")[0] - 0,
                    status = true;
                if(num <= 2){
                    num = 3;
                    status = this.totalSingle(i, num, this.total.outerAmount, id, data.Wagers);
                }else if(num == 3){
                    num = 2;
                    status = this.totalSingle(i, num, this.total.amongAmount, id, data.Wagers);
                }else{
                    num = 1;
                    status = this.totalSingle(i, num, this.total.insideAmount, id, data.Wagers);
                }
                status == true && data.Wagers[i] !=0 && this.otherCoin(num, id, data.Wagers[i]);
            }
        },
        socket(){// socket链接
            this.lodingNumber = 70;
            let status = true,
                hub = $.hubConnection( this.$store.state.href + '/signalr'),
                proxy = hub.createHubProxy('gameHub');

 /*            proxy.on('consistent', (data) => {// 三秒
                !status && !this.otherStatus && this.totalDealWith(data);
                this.count = data.DiffIntervalSecond;
                if(status){// 第一次进入页面
                    status = false;
                    this.gameInfo.id = data.GameId;
                    this.gameInfo.double = data.Details.map((todo, i)=>{
                        return todo.Odds;
                    });
                    this.start();
                    this.lodingNumber = 100;

                    window.parent.enableBroadcast && window.parent.enableBroadcast(1, (res)=>{// 监听玩家胜负
                        this.winningAdd(res);
                    }) */

                    setTimeout(() => {
                        this.lodingStatus = false;
                        this.start();
                    }, 1000);
             /*    }
            }) */
            /* proxy.on('openGame', (data) => {// 开奖
                console.log(data)
                this.winningAdd(data.WinRobotWager);
                this.gameInfo.nextId = data.NextGame.GameId
                this.lottery.winningId =  data.Game.Details.map((todo, i)=>{
                    return todo.OptionNumber;
                })
                this.gameInfo.nextDouble = data.NextGame.Details.map((todo, i)=>todo.Odds)
                this.lotteryEvent();
            })
            hub.reconnecting(()=>{// 重连尝试
                this.netStatus = true;
            });
            hub.reconnected(()=>{// 重连成功
                this.netStatus = false;
            });
            hub.disconnected(()=>{// 断连
                this.disconnectStatus = this.maskStatus = true;
                this.netStatus = false;
            });
            hub.start().done((data)=>{
            }) */
        },
        historyList(){// 历史查询
            axios({
                method:'get',
                url: this.$store.state.href + '/api/query/Trend',
                data:{
                    param:''
                },
                withCredentials: true,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            }).then((res)=>{
                this.historyInfo.data = res.data;
                this.historyInfo.status = true;
            })
        },
        orderList(){// 订单查询
            this.orderInfo.page = 0;
            axios({
                method:'get',
                url: this.$store.state.href + '/api/query/Order?index=' + this.orderInfo.page,
                data:{
                    param:''
                },
                withCredentials: true,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            }).then((res)=>{
                this.orderInfo.status = true;
                this.orderInfo.list = res.data;
            })
        },
        alert(text){// 警告消息函数
            this.message.text = text || "未传入文字";
            this.message.status = true;
            setTimeout(() => {
                this.message.status = false; 
                this.message.text = "";  
            }, 3000);
        },
        musicControl(){// 音乐开关
            if(this.musicOff){
                this.musicOff = this.music.offMusic = false;
            }else{
                this.musicOff = this.music.offMusic = true;
            }
        },
        winningAdd(res){// 添加中奖消息数据
            if(!res.length){
                return;
            }
            let arr = res.map((todo)=>{
                return {
                    text: `<span>${todo.NickName}</span><i>赢得了<em>${todo.InCoin}</em>金豆</i>`,
                    left: null
                }
            })
            setTimeout(() => {// 将中奖信息延迟到中奖后退出
                this.winning.message.push(...arr);
            }, 12000);
            return;
        },
        recharge(){// 充值开启
		    window.parent.showGetCoin && window.parent.showGetCoin();
            /* this.maskStatus = true;
            let obj = window.parent.document.querySelector(".pop-mn");
            obj.style.display = "block";
            obj.style.left = obj.style.top = "50%";
            obj.style.transform = obj.style.webkitTransform = obj.style.mozTransform = "translate(-50%, -50%)"; */
        }
    },
    mounted(){// 初始化
        this.lodingNumber = 30;

        this.game = new Game({
        });
        this.body = new Body();
        
        setTimeout(() => {
            this.remind.start = false;
        }, 1000);
        /* axios({// 初始化init
            method:'get',
            url: this.$store.state.href + '/api/game/init',
            data:{
                param:''
            },
            withCredentials: true,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            }
        }).then((res)=>{
            this.lottery.name.gender = this.body.scrollBar(3, (res.data.LastGameWinModel+"")[0]-0 ).name
            this.lottery.name.elements = this.body.scrollBar(2, (res.data.LastGameWinModel+"")[2]-0 ).name
            this.lottery.name.constellation = this.body.scrollBar(1, (res.data.LastGameWinModel+"").slice(3)-0 ).name

            this.coin = res.data.User.Coin;
            res.data.Wager.map((todo, i)=>{// 下注还原
               switch (todo.PartyId) {
                    case 3:
                        let a = { coin:todo.Coin, id: todo.OptionNumber };
                        this.outerAmount.push(a);
                        this.total.outerAmount.push(a);
                        break;
                    case 2:
                        let b = { coin:todo.Coin, id: todo.OptionNumber };
                        this.amongAmount.push(b);
                        this.total.amongAmount.push(b);
                        break;
                    case 1:
                        let c = { coin:todo.Coin, id: todo.OptionNumber == 1?2:1 };
                        this.insideAmount.push(c);
                        this.total.insideAmount.push(c);
                        break;
               }
            })


            this.lodingNumber = 60;
        }).catch(function(error){
            error.response && (window.top.location.href = window.top.location.href);
        }) */
            this.socket();
        
        this.music = new Music(config);
        this.music.getAudio("bgm").dom.play();

    }
}
</script>

<style>
/* 头部 */
.gameBox{background: url(../public/Images/game_bg.jpg) no-repeat; background-size: 100% 100%; position: fixed; left: 0;top: 0; width: 100%; height: 100%;}
.game_prompt{position: absolute; left: 0; top: 0; width: 100%;}
.game_promptLeft, .game_promptRight{width:0.67rem; height:1.17rem; background: url(../public/Images/lantern.png); background-size: 100% 100%; cursor: pointer; margin-top: 0.3rem;}
.game_promptLeft{ float: left; color: #fcec6f; padding-top: 0.18rem; text-align: center;}
.game_promptLeft h6{font-size: 0.12rem;}
.game_lottery{font-size: 0.10rem; font-weight: bold;}
.game_promptFortuna{ position: absolute; left: 50%; top: 0.45rem; width:1.03rem; height: 1.16rem; background: url(../public/Images/mammon.png); background-size: 100% 100%; transform:translate(-50%,0);-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);}
.game_promptRight{float: right;text-align: center; padding-top: 0.15rem;}
.game_promptRight h6{font-size: 0.12rem; color: #fcec6f;}
.game_count{color: #fcec6f; font-size: 0.18rem;}
.game_count strong{font-size: 0.14rem;}

/* 游戏区域 */
.game_main{ width: 3.2rem; height: 3.15rem; position:absolute; left:0; top: 1.2rem; background: url(../public/images/turntable.png); background-size: 100%; text-align: center;}
.game_outer{ width:2.91rem; height: 2.91rem; position: absolute; left: 0.15rem; top: 0.12rem; border-radius: 2.91rem; }
.game_among{ width:1.78rem; height: 1.78rem; position: absolute; left: 0.705rem; top: 0.675rem; border-radius: 2.91rem;}
.game_inside{ width: 0.86rem; height: 0.86rem; position: absolute; left: 1.16rem; top: 1.13rem; border-radius: 2.91rem; }
.game_main span{display: inline-block; width:0.5rem; background: rgba(120, 26, 22, 0.8); height: 0.14rem; font-size: 0.11rem; border-radius: 0.07rem;text-align: center; position: absolute; line-height: 0.14rem; color: #fff; transform-origin:center 1.4rem; }
.game_outerTimes, .game_amongTimes, .game_insideTimes{position: absolute; color: #e9a3a1; width: 0.46rem; font-size: 0.1rem; left:50%; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0);}
.game_outerTimes em, .game_amongTimes em, .game_insideTimes em{font-size: 0.10rem;}
.game_outerTimes{top: -0.13rem; }
.game_amongTimes{top: -0.02rem;}
.game_insideTimes{top: -0.04rem;}
.game_main span.me_coin{color: #fef799; background: rgba(0, 0, 0, 0.5);}

/* 底部 */
.game_bottom{position: absolute; left: 0; bottom: 0; width: 100%; background: #352020; height: 0.52rem;}
.game_bottomLeft{float: left;margin:0 0 0 0.1rem;}
.game_bottomLeft h6{font-size: 0.12rem; color: #b77e7e; line-height: 0.21rem; margin-top: 0.06rem; padding-left: 0.03rem;}
.game_price{width:0.8rem; height:0.17rem; background: #251616; position: relative; border-radius: 0.1rem; }
.game_priceLast{font-size: 0.12rem; color: #d6a7a7; padding-left:0.07rem;}
.game_priceAdd{width: 0.23rem; height: 0.23rem; display: block; background: #f0c063; position: absolute; right: -0.03rem;top: -0.04rem; border-radius: 0.25rem;}
.game_priceAdd:after, .game_priceAdd:before{content: ""; background: #e86d1c; border-radius:0.01rem; position: absolute; left: 50%;top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%);}
.game_priceAdd:before{width: 0.11rem; height: 0.03rem;}
.game_priceAdd:after{width: 0.03rem; height: 0.11rem;}

.game_bottomGrade{float: left; margin:0.06rem 0 0 0.07rem; cursor: pointer;}
.game_bottomGrade li{ width: 0.47rem; height:0.42rem; position: relative; background: url(../public/Images/Grade.png) -0.53rem 0; background-size:1rem 100%; float: left; margin-left: 0.06rem;}
.game_bottomGrade span{color: #561e1e; font-size: 0.11rem; position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; line-height: 0.15rem;}
.game_bottomClear{float: right; width: 0.4rem; height:0.39rem; background: url(../public/Images/clear.png); background-size: 100% 100%; margin:0.06rem 0.04rem 0 0;  cursor: pointer;}
.game_bottomGrade .active{background-position:0 0; position: relative; top: -0.04rem;}

/* 下注位置 */
.game_outerChild1{left: 1.18rem; top: 0.32rem;  }
.game_outerChild2{left: 1.78rem; top: 0.42rem; }
.game_outerChild3{left: 2.3rem; top: 0.9rem;}
.game_outerChild4{left: 2.4rem; top: 1.47rem;}
.game_outerChild5{left: 2.2rem; top: 2.07rem; }
.game_outerChild6{left: 1.8rem; top: 2.5rem;}
.game_outerChild7{left: 1.2rem; top: 2.7rem;}
.game_outerChild8{left: 0.6rem; top: 2.5rem;}
.game_outerChild9{left: 0.2rem; top: 2.1rem;}
.game_outerChild10{left: 0rem; top: 1.5rem;}
.game_outerChild11{left: 0.1rem; top: 0.93rem;}
.game_outerChild12{left: 0.6rem; top: 0.46rem;}

.game_totalChild1{left: 1.18rem; top: 0.16rem;}
.game_totalChild2{left: 1.78rem; top: 0.26rem;}
.game_totalChild3{left: 2.3rem; top: 0.74rem;}
.game_totalChild4{left: 2.4rem; top: 1.31rem;}
.game_totalChild5{left: 2.2rem; top: 1.91rem;}
.game_totalChild6{left: 1.8rem; top: 2.34rem;}
.game_totalChild7{left: 1.2rem; top: 2.54rem;}
.game_totalChild8{left: 0.6rem; top: 2.34rem;}
.game_totalChild9{left: 0.2rem; top: 1.94rem;}
.game_totalChild10{left: 0rem; top: 1.34rem;}
.game_totalChild11{left: 0.1rem; top: 0.77rem;}
.game_totalChild12{left: 0.6rem; top: 0.3rem;}

.game_amongChild1{left: 0.47rem; top: 0.24rem;}
.game_amongChild2{left: 1.2rem; top: 0.5rem;}
.game_amongChild3{left: 1.1rem; top: 1.4rem;}
.game_amongChild4{left: 0.14rem; top: 1.4rem;}
.game_amongChild5{left: 0.03rem; top: 0.5rem;}

.game_amongTotalChild1{left: 0.47rem; top: 0.08rem;}
.game_amongTotalChild2{left: 1.2rem; top: 0.34rem;}
.game_amongTotalChild3{left: 1.1rem; top: 1.24rem;}
.game_amongTotalChild4{left: 0.14rem; top: 1.24rem;}
.game_amongTotalChild5{left: 0.03rem; top: 0.34rem;}

.game_main span.game_insideChild2{left: 0.43rem; top: 0.65rem; width: 0.35rem;}
.game_main span.game_insideChild1{left: 0.07rem; top: 0.65rem; width: 0.35rem;}

.game_main span.game_insideTotalChild1{left: 0.43rem; top: 0.49rem; width: 0.35rem;}
.game_main span.game_insideTotalChild2{left: 0.07rem; top: 0.49rem; width: 0.35rem;}



/* 开奖 */
.game_end{position: fixed; left:0; top: 50%; width: 100%; padding-left: 0.07rem; height:2.12rem; background:#411515 url(../public/images/lottery-bg.jpg); transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); background-size: 100% 100%;}
.game_end>div{float: left; margin-left: 0.17rem; width:0.9rem; height:1.47rem; background: url(../public/images/lantern2.png); background-size: 100% 100%;}
.game_end>div.game_endGender{margin-left: 0;}
.game_end i{width: 0.33rem; height: 0.6rem; display: block; margin:0.71rem 0 0 0.28rem; }
.game_endGender i{background:url(../public/images/Winfont2.png); background-size:0.645rem 0.6rem; transition: 5s cubic-bezier(0,0,0.18,1);}/* 0.18 */
.game_endElements i{background:url(../public/images/Winfont1.png); background-size:1.625rem 0.605rem; transition: 8s cubic-bezier(0,0,0.65,1);}
.game_endConstellation i{ background:url(../public/images/Winfont3.png); background-size:3.90rem 0.605rem; transition: 11s cubic-bezier(0,0,0.65,1);}

/* 提示文字（财源滚滚，吉时已到） */
.game_remind{width: 100%; height: 0.77rem; padding: 0.17rem 0 0 0.44rem; background: rgba(0,0,0,0.8); box-shadow: 0 0px 5px #ffd176;  border-top:1px solid #a2623c; border-bottom:1px solid #a2623c; position: fixed; left: 0; top: 50%; transform: translate(0,-50%); -webkit-transform: translate(0,-50%);}
.game_remindText{border:0.02rem solid #f8e16b; border-radius: 100%; float: left; width: 0.38rem; height: 0.38rem; text-align: center;}
.game_remindText:after{content: ""; display: inline-block; height: 100%; vertical-align: middle;}
.game_remind img{vertical-align: middle; width: 0.28rem;}
.game_remindSymbol{width: 0.06rem; height: 0.06rem; background: #934b23; transform: rotate(45deg); -webkit-transform: rotate(45deg); margin:0.16rem 0.1rem 0; float: left;}

/* 结算 */
.game_result{ position: fixed; left: 0; top: 50%; width: 100%; height:0.89rem; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); background: rgba(0,0,0,0.85); color: #ffcd6a; font-size: 0.18rem; text-align: center; line-height: 0.89rem;}
.otherCoin{width: 0.2rem; height: 0.16rem; background:url(../public/images/coin.png) no-repeat; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); background-size: 100%; position: absolute; left: 1.15rem; top: 0.33rem; transition:1.2s ease-out;}

.game_order{width: 0.61rem; height: 0.23rem; cursor: pointer; line-height: 0.23rem; font-size: 0.12rem; border-radius:0.8rem 0 0 0.8rem; background: #382020; color: #b77d7d; padding-left: 0.05rem; position: fixed; bottom: 0.8rem; right: 0;}
.game_message{position: fixed; left: 50%; top: 50%; padding:0.09rem 0.1rem 0.09rem; max-width: 80%; min-width: 60%; min-height: 0.35rem; border-radius: 0.35rem; background: rgba(0,0,0,0.8); text-align: center; z-index: 100; color: #fff; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}

.game_musicControl{width: 0.318rem; height: 0.32rem; position: fixed; right: 0.08rem; top: 1.1rem; background: url(../public/images/music_control.png) no-repeat; background-size:0.64rem 0.32rem;}
.game_musicControl.active{background-position:-0.32rem 0;}

.betting_mask{position: absolute;left: 50%;top: 50%; width: 0.38rem; height: 0.38rem; background: rgba(0, 0, 0, 0.8); border-radius: 0.04rem; text-align: center; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); }
.betting_mask .spinner{width: 0.2rem; height: 0.2rem; margin:0.1rem auto 0;}
.betting_maskText{font-size: 0.1rem; color: #fff; line-height: 0.13rem;}
.betting_mask .container1>div, .betting_mask .container2>div, .betting_mask .container3>div{width: 0.05rem; height: 0.05rem;}

.imgUpdata_loader{ position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6); text-align:center; display:block; z-index:100000; z-index:95438;}
.spinner{margin:40vh auto 0;width:0.6rem;height:0.6rem;position:relative}
.container1>div,.container2>div,.container3>div{width:0.1rem;height:0.1rem;background-color:#eee;border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.spinner .spinner-container{position:absolute;width:100%;height:100%}
.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}
.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}
.circle1{top:0;left:0}
.circle2{top:0;right:0}
.circle3{right:0;bottom:0}
.circle4{left:0;bottom:0}
.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}
.container3 .circle1{-webkit-animation-delay:-1s;animation-delay:-1s}
.container1 .circle2{-webkit-animation-delay:-.9s;animation-delay:-.9s}
.container2 .circle2{-webkit-animation-delay:-.8s;animation-delay:-.8s}
.container3 .circle2{-webkit-animation-delay:-.7s;animation-delay:-.7s}
.container1 .circle3{-webkit-animation-delay:-.6s;animation-delay:-.6s}
.container2 .circle3{-webkit-animation-delay:-.5s;animation-delay:-.5s}
.container3 .circle3{-webkit-animation-delay:-.4s;animation-delay:-.4s}
.container1 .circle4{-webkit-animation-delay:-.3s;animation-delay:-.3s}
.container2 .circle4{-webkit-animation-delay:-.2s;animation-delay:-.2s}
.container3 .circle4{-webkit-animation-delay:-.1s;animation-delay:-.1s}
@-webkit-keyframes bouncedelay{0%,100%,80%{-webkit-transform:scale(0)}
40%{-webkit-transform:scale(1)}
}
@keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}
40%{transform:scale(1);-webkit-transform:scale(1)}
}

.mask{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 100;}

.pop-mn{width:2rem;min-height:1.6rem;background:#fff;border-radius:.04rem;position:fixed; z-index: 101;}
.pop-mn .title{height:.41rem;line-height:.41rem;background:url(../public/images/title-bg.jpg) repeat-x;border-top-left-radius:.04rem;border-top-right-radius:.04rem;text-align:center;background-size:100%;line-height:0}
.pop-mn .title img{width:.85rem;height:.25rem;margin-top:.1rem}
.pop-ct .ct-txt{padding:.175rem;font-size:.14rem;color:#333;line-height:1.5}
.pop-ct .ct-btn{background:url(../public/images/btn-bg.png) no-repeat;width:1.25rem;height:.3rem;text-align:center;position:absolute;bottom:.175rem;left:50%;margin-left:-.62rem;color:#fff;font-size:.14rem;line-height:.3rem;background-size:100%}
.pop-mn .close{width:.2rem;height:.2rem;background:0 0;border-radius:100%;border:2px solid #fff;position:absolute;top:-.35rem;right:.02rem;cursor:pointer;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg)}
.pop-mn .close:after,.pop-mn .close:before{content:'';position:absolute;display:block;left:50%;top:50%;background:#fff;border-radius:2px}
.pop-mn .close:before{height:.02rem;width:.13rem;margin:-.01rem 0 0 -.065rem}
.pop-mn .close:after{height:.13rem;width:.02rem;margin:-.06rem 0 0 -.01rem}
.pop-mn:before{content:'';display:block;width:.01rem;height:.15rem;background:#fff;position:absolute;top:-.15rem;right:.12rem}
.broadcast{position:fixed;right:8px;top:870px;width:100%}
.horn{height:40px;background:#0008;position:absolute;border-radius:20px;right:0;font-size:22px;color:#fff;padding:0 20px;line-height:40px}
.horn em.name{display:inline-block;max-width:100px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:middle;position:relative;top:- 2px;color:#d6bf28;font-style:inherit}
.horn em.dou{color:#d6bf28;font-style:inherit}

.disconnect{width: 2rem;height: 1.3rem;position: fixed;left:50%;top:50%;z-index: 95438;background: #fff;text-align: center;border-radius:0.04rem;overflow: hidden;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);}
.disconnect h6{height: 0.41rem;font-size: 0.2rem;color: #fff;line-height: 0.41rem;background: #ff524d;}
.disconnect p{font-size: 0.14rem;color: #333;line-height: 0.5rem;}
.disconnect a{display: block;width: 1.25rem;height: 0.3rem;background: #ff524d;margin:0 auto;font-size:0.14rem;color: #fff;line-height: 0.3rem;border-radius:0.15rem;}

</style>


